<template>
  <div class='container'>
    <el-form ref="addForm" :model="form" :rules="rules" label-width="80px">
      <!-- 学科 -->
      <el-form-item label="学科：" prop="subjectID">
        <el-select v-model="form.subjectID" placeholder="请选择活动区域">
          <el-option v-for="item in subjectList" :key="item.id" :label="item.subjectName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <!-- 目录 -->
      <el-form-item label="目录：" prop="catalogID">
        <el-select v-model="form.catalogID" placeholder="请选择活动区域">
          <el-option v-for="item in catalogList" :key="item.id" :label="item.directoryName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <!-- 企业 -->
      <el-form-item label="企业：" prop="enterpriseID">
        <el-select v-model="form.enterpriseID" placeholder="请选择活动区域">
          <el-option v-for="item in enterpriseList" :key="item.id" :label="item.shortName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <!-- 城市 -->
      <el-form-item label="城市：" prop="province">
        <el-select v-model="form.province" placeholder="请选择" @change="choseProvince">
          <el-option v-for="item in provinces" :key='item.city' :label="item" :value="item"></el-option>
        </el-select>
        <el-select v-model="form.city" placeholder="请选择">
          <el-option v-for="item in citys" :key='item.area' :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <!-- 方向 -->
      <el-form-item label="方向：" prop="direction">
        <el-select v-model="form.direction" placeholder="请选择">
          <el-option v-for="item in directionList" :key="item.id" :label="item.direction" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <!-- ？？？？ -->
      <!-- 题型 -->
      <el-form-item label="题型：" prop="type">
        <el-radio-group v-model="form.questionType">
          <el-radio :label="1">单选</el-radio>
          <el-radio :label="2">多选</el-radio>
          <el-radio :label="3">简答</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 难度 -->
      <el-form-item label="难度：" prop="difficulty">
        <el-radio-group v-model="form.difficulty">
          <el-radio label="1">简单</el-radio>
          <el-radio label="2">一般</el-radio>
          <el-radio label="3">困难</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 文章内容 -->
      <el-form-item label="题干：" prop="question">
        <!-- 使用v-model进行双向的数据绑定 -->
        <quill-editor v-model="form.question" class="ql-editor">
        </quill-editor>
      </el-form-item>
      <el-form-item class="wwwp">
        <button class="el-button--small">+增加预选与答案</button>
      </el-form-item>
      <!-- 解析视频 -->
      <el-form-item label="解析视频：" prop="video" class="wawawa">
        <el-input v-model="form.videoURL"></el-input>
      </el-form-item>
      <!-- 答案解析 -->
      <el-form-item label="答案解析：" prop="answer">
        <quill-editor v-model="form.answer"></quill-editor>
      </el-form-item>
      <!-- 题目备注 -->
      <el-form-item label="题目备注：" prop="remarks" class="wawa">
        <el-input type="textarea" v-model="form.remarks"></el-input>
      </el-form-item>
      <!-- 试题标签 -->
      <el-form-item label="试题标签：" prop="label">
        <el-select v-model="form.tags" placeholder="请选择">
          <el-option v-for="item in tagList" :key="item.id" :label="item.tagName" :value="item.tagName">
          </el-option>
        </el-select>
      </el-form-item>
      <!-- 选项 -->
      <el-form-item label="选项：" v-if="form.questionType !== '3'">
        <el-col v-for="(item,index) in form.options" :key="index">
          <el-radio v-if="form.questionType = '1'" v-model="item.isRight" :label="true">{{item.code}}</el-radio>
          <el-checkbox v-else v-model="item.isRight" :label="item.code + ':'"></el-checkbox>
          <el-input v-model="form.name"></el-input>
          <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" multiple :limit="1">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
          <!-- <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3" :on-exceed="handleExceed" :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload> -->
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">确认提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { provinces, citys } from '@/api/hmmm/citys.js'
import { subjectList, catalogList, enterpriseList, directionList, add, tagList } from '@/api/hmmm/entering.js'
// import { direction } from '../../api/hmmm/constants'

export default {
  data () {
    return {
      // 试题标签
      tagList: [],
      // 方向
      directionList: [],
      input: '',
      // 市
      provinces: [],
      // 区
      citys: [],
      // 学科列表
      subjectList: [],
      // 目录列表
      catalogList: [],
      // 企业列表
      enterpriseList: [],
      // 表单的数据对象
      // pubForm: {
      //   title: '',
      //   cate_id: ''
      //   文章的内容
      //   question: ''
      // },
      // 表单数据
      form: {
        // 试题标签
        tags: '',
        // 题目备注
        remarks: '',
        // 答案解析
        answer: '',
        // 视频地址
        videoURL: '',
        // 文章的内容
        question: '',
        // 方向
        direction: '',
        // 城市
        province: '',
        // 地区
        city: '',
        // 学科
        subjectID: '',
        // 目录
        catalogID: '',
        // 企业
        enterpriseID: '',
        // 题型
        questionType: '1',
        // 难度
        difficulty: '1',
        // 活动形式
        activity: '',
        options: [{
          code: 'A',
          title: '',
          img: '',
          isRight: false
        }, {
          code: 'B',
          title: '',
          img: '',
          isRight: false
        }, {
          code: 'C',
          title: '',
          img: '',
          isRight: false
        }, {
          code: 'D',
          title: '',
          img: '',
          isRight: false
        }]
      },
      // 验证规则
      rules: {
        subjectID: [
          { required: true, message: '请选择学科', trigger: 'change' }
        ],
        catalogID: [
          { required: true, message: '请选择目录', trigger: 'change' }
        ],
        enterpriseID: [
          { required: true, message: '请选择企业', trigger: 'change' }
        ],
        direction: [
          { required: true, message: '请选择企业', trigger: 'change' }
        ],
        province: [
          { required: true, message: '请选择城市', trigger: 'change' }
        ],
        city: [
          { required: true, message: '请选择区', trigger: 'change' }
        ],
        difficulty: [
          { required: true, message: '请选择题目难度', trigger: 'change' }
        ],
        type: [
          { required: true, message: '请选择题型', trigger: 'change' }
        ],
        question: [
          { required: true, message: '请输入文章内容', trigger: 'change' }
        ],
        // optionw: [
        //   { required: true, message: '请选择题目正确答案', trigger: 'change' }
        // ],
        video: [
          { required: true, message: '请选择上传题目解析视频', trigger: 'change' }
        ],
        answer: [
          { required: true, message: '请输入答案解析', trigger: 'change' }
        ],
        remarks: [
          { required: true, message: '请输入题目备注', trigger: 'change' }
        ],
        label: [
          { required: true, message: '请选择试题标签', trigger: 'change' }
        ]
      }
    }
  },
  created () {
    this.choseProvince()
    this.getSubjectList()
    this.getCatalogList()
    this.getEnterpriseList()
    this.getDirectionList()
    this.getTagList()
  },
  methods: {
    // 提交
    onSubmit () {
      this.$refs.addForm.validate(async valid => {
        if (!valid) return
        try {
          const ret = await add(this.form)
          if (ret.code === 200) {
            this.$message.success('提交成功！')
            this.$refs.addForm.resetFields()
          }
        } catch {
          this.$message.error('提交失败！')
        }
      })
    },
    // 试题标签
    async getTagList () {
      try {
        const ret = await tagList({ page: 1, pagesize: 10000 })
        if (ret.status === 200) {
          this.tagList = ret.data.items
        }
      } catch {
        this.$message.error('获取标签列表失败')
      }
    },
    // 城市
    choseProvince () {
      this.provinces = provinces()
      this.citys = citys(this.form.province)
    },
    // 学科
    async getSubjectList () {
      try {
        const ret = await subjectList({ page: 1, pagesize: 100000 })
        if (ret.status === 200) {
          this.subjectList = ret.data.items
        }
      } catch {
        this.$message.error('获取学科列表失败')
      }
    },
    // 目录
    async getCatalogList () {
      try {
        const ret = await catalogList({ page: 1, pagesize: 100000 })
        if (ret.status === 200) {
          this.catalogList = ret.data.items
        }
      } catch {
        this.$message.error('获取目录列表失败')
      }
    },
    // 企业
    async getEnterpriseList () {
      try {
        const ret = await enterpriseList({ page: 1, pagesize: 100000 })
        if (ret.status === 200) {
          this.enterpriseList = ret.data.items
        }
      } catch {
        this.$message.error('获取企业列表失败')
      }
    },

    // 方向
    async getDirectionList () {
      try {
        const ret = await directionList()
        if (ret.status === 200) {
          this.directionList = ret.data.items
        }
      } catch {
        this.$message.error('获取企业列表失败')
      }
    }
  }
}
</script>

<style scoped >
.ql-editor {
  /* min-height: 200px; */
  height: 200px;
  margin-bottom: 60px;
}
.active {
  float: left;
}
.float {
  position: relative;
  /* // padding-bottom: 1.25rem; */
  height: 5rem;
}
.wwwp {
  transform: translateY(-70px);
  margin-bottom: 10px;
}
.el-button--small {
  background-color: pink;
  color: #fff;
  border: 0;
}
.wawawa {
  margin-top: 180px;
  width: 300px;
  transform: translateY(-220px);
}
</style>
